<template>
  <FIModel v-model="showModel" width="980" :title="title" :show-fotter="false" @close="closeClick">
    <FITable
      class="box-radius2"
      title="记录集"
      :data="state.dataList"
      v-model:columns="columns"
      :isLoading="isTableLoading"
      checkMode=""
      :pageConfig="pageConfig"
      :show-save-model="false"
      :show-page-bar="false"
      @table-refresh="searchFn"
      @size-change="handleSizeChange"
      @current-page-change="handleCurrentChange"
    ></FITable>
  </FIModel>
</template>
<script setup lang="ts">
import FIModel from '@/components/FIModel.vue'
import FITable from '@/components/FITable/index.vue'
import { ref, watch, reactive } from 'vue'
import type { PageConfig, Column } from '@/types/components'
import { apiRequestPost } from '@/api/globalApi.js'
import { getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance() // 获取当前组件实例上下文
import { useRoute } from 'vue-router'
const route = useRoute()
const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    default: '委托代理履历',
  },
  queryId: {
    type: String,
    default: 'his',
  },
  taskId: {
    type: String,
    default: '',
  },
})
const emits = defineEmits(['update:visible'])
const showModel = ref(props.visible)
watch(
  () => props.visible,
  (val) => {
    if (showModel.value !== val) {
      showModel.value = val
      emits('update:visible', val)
    }
    console.log('00000000-------11', props.taskId)
    state.query.taskId = props.taskId
    if (val) searchFn()
  }
)
watch(
  () => showModel.value,
  (val) => {
    emits('update:visible', val)
  }
)
const closeClick = () => {
  showModel.value = false
  emits('update:visible', false)
}
// 表格是否显示加载中
const isTableLoading = ref(false)

const state = reactive({
  // 查询条件
  query: {
    taskId: props.taskId || '',
    current: 1,
    size: 999,
  },
  // 表格数据
  dataList: [],
})
// 页面配置
const pageConfig: PageConfig = reactive({
  total: 0, // 总条数
  currentPage: 1, // 当前页码
})
// 表格列数据
const columns: Column[] = reactive([
  {
    label: '履历类型',
    prop: 'hisType',
    align: 'center',
    editType: 'select',
    width: '100',
    editConfig: {
      options: [
        // 下拉框选项
        { value: '0', label: '委托' },
        { value: '1', label: '代理' },
      ],
    },
  },
  {
    label: '日志信息',
    prop: 'logInfo',
    align: 'center',
  },
  {
    label: '发生时间',
    prop: 'logTime',
    align: 'center',
    width: '160',
    editType: 'date-picker',
  },
  {
    label: '操作员',
    prop: 'opratorName',
    align: 'center',
    width: '200',
  },
])

// 分页大小改变回调函数
const handleSizeChange = (e) => {
  pageConfig.pageSize = e
  pageConfig.currentPage = 1
  searchFn()
}
// 分页页码改变回调函数
const handleCurrentChange = (e) => {
  pageConfig.currentPage = e
  searchFn()
}

// 搜索查询函数
const searchFn = (type?: string, columnsVal?: any) => {
  // 页面搜索数据组装
  isTableLoading.value = true
  if (pageConfig.pageSize) state.query.size = pageConfig.pageSize
  const apiUrl = proxy.$Button_api(props.queryId, route.name)
  apiRequestPost(apiUrl, state.query)
    .then((res) => {
      isTableLoading.value = false
      if (res.data.success) {
        state.dataList = res.data.data
        // pageConfig.pageSize = Number(res.data.data.size)
        // pageConfig.total = Number(res.data.data.count)
      }
    })
    .catch((error: any) => {
      isTableLoading.value = false
      // 处理错误
    })
}

// onMounted(() => {
//   searchFn()
// })
</script>
